<%--
  Created by IntelliJ IDEA.
  User: kz
  Date: 2017/8/7
  Time: 13:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<meta name="viewport" content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">
<html>

<script>
    var jsons = {
        obj1:[{p2:"obj1.obj1"},{p2:"obj1.obj2"}],
        obj2:[{p2:"obj2.obj1"},{p2:"obj2.obj2"},{p2:"obj2.obj3"}]
    }

    function mytestfunc() {
//        var temps ="";
//        temps =  document.getElementById("mytestbtn1").innerHTML;
        temps = $("#mytestbtn1").text();
        if(temps == "你按过了"){

            $('#mytestbtn1').text("你又按了");

        }else
        $('#mytestbtn1').text("你按过了");
        console.log("被调用")

        alert(jsons.obj1[0].p2)
    }


</script>
<head>
    <%--添加BOOTSTRAPE头文件--%>
    <%@include file="../include/boothead.jsp" %>
    <title>BootStrape风格测试专用页</title>
</head>
<body>


<%--<div class="panel-group" id="accordion">--%>
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion"
             href="#collapseOne">
            <h4 class="panel-title">

                    条纹状布局页面测试,折叠第一部分

            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">


                <div class="container">

                    <div class="col-md-12">

                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <caption>条纹状布局</caption>
                            <thead>

                            <tr>
                                <th>
                                    表头1
                                </th>
                                <th>
                                    表头2
                                </th>
                                <th>
                                    表头3
                                </th>
                            </tr>
                            </thead>

                            <tbody>

                            <tr>
                                <td>
                                    内容1
                                </td>
                                <td>
                                    内容2
                                </td>
                                <td>
                                    内容3
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    内容1
                                </td>
                                <td>
                                    内容2
                                </td>
                                <td>
                                    内容3
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    内容1
                                </td>
                                <td>
                                    内容2
                                </td>
                                <td>
                                    内容3

                                    <button class="btn btn-default">提交</button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion"
             href="#collapseTwo">
            <h4 class="panel-title">

                    复合表单测试,折叠第二部分

            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
            <div class="panel-body">

                <div class="container">

                    <div class="col-md-12">
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <caption>条纹状布局</caption>
                            <thead>


                            <tr>
                                <th>
                                    表头1
                                </th>
                                <th>
                                    表头2
                                </th>
                            </tr>
                            </thead>

                            <tbody>
                            <td>

                                <div class="col-md-6 col-lg-6">

                                    <form class="form" role="form" method="post" enctype="multipart/form-data">
                                        <div class="form-group">
                                            <label class="sr-only" for="name">名称</label>
                                            <input type="text" class="form-control" id="name" placeholder="请输入名称"
                                                   name="input1">
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="inputfile">文件输入</label>
                                            <input type="file" id="inputfile" name="file">
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="checked">请打勾
                                            </label>
                                        </div>
                                        <button type="submit" class="btn btn-default">提交</button>
                                        <button type="button" class="btn btn-default" onclick="mytestfunc()" id="mytestbtn1">测试按钮</button>
                                    </form>

                                </div>
                            </td>
                            <td>

                                <div class="col-md-6 col-lg-6">

                                    <div class="checkbox">
                                        <label><input type="checkbox" value="">选项 1</label>
                                    </div>
                                    <div class="checkbox">
                                        <label><input type="checkbox" value="">选项 2</label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                                   checked> 选项
                                            1
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios2"
                                                   value="option2">选项 2 -
                                            选择它将会取消选择选项 1
                                        </label>
                                    </div>
                                    <label for="name">内联的复选框和单选按钮的实例</label>
                                    <div>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsRadiosinline" id="optionsRadios3"
                                                   value="option1"
                                                   checked> 选项 1
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsRadiosinline" id="optionsRadios4"
                                                   value="option2"> 选项 2
                                        </label>
                                    </div>


                                </div>

                            </td>


                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-parent="#accordion"
             href="#collapseThree">
            <h4 class="panel-title">

                    MODAL测试,折叠第三部分

            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">

                <div class="col-lg-offset-2">


                    <h2>模态框（Modal）插件方法</h2>
                    <!-- 按钮触发模态框 -->

                    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        开始演示模态框
                    </button>
                </div>
            </div>
        </div>
    </div>
<%--</div>--%>



<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4>
            </div>
            <div class="modal-body">
                按下 ESC 按钮退出。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"> 提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    //    页面加载后自动显示MODAL
    //    $(function () {
    //        $('#myModal').modal({
    //            keyboard: true
    //        })
    //    });
</script>


</body>
</html>
